<script setup>
import { useCollapseStore } from '@/stores/collapse.js'
import { storeToRefs } from 'pinia'
import { ref } from 'vue';

const collapseStore = useCollapseStore()
const { isCollapse } = storeToRefs(collapseStore)
const falseVal = ref(false)
</script>

<template>
  <div class="title" v-show="isCollapse === falseVal">
    <el-avatar src="https://cn.vuejs.org/logo.svg" :size="50"></el-avatar><br />
    <span class="title-text">XX系统后台管理</span><hr />
  </div>
  <div class="menu">
    <el-menu active-text-color="green" :collapse="isCollapse" background-color="#e6e6e6" :collapse-transition="falseVal"
      class="el-menu-vertical-demo" default-active="2" text-color="black" router>
      <el-sub-menu index="1">
        <template #title>
          <el-icon><User /></el-icon><span>用户管理</span>
        </template>
        <el-menu-item index="/user-crud"><el-icon><Check /></el-icon>用户增删改查</el-menu-item>
        <el-menu-item index="1-2"><el-icon><Check /></el-icon>item two</el-menu-item>
        <el-menu-item index="1-3"><el-icon><Check /></el-icon>item three</el-menu-item>
      </el-sub-menu>
      <el-menu-item index="2">
        <el-icon><Check /></el-icon><span>其他管理</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>
<style scoped>
.title {
  text-align: center;
}
.title-text {
  font-size: 20px;
  font-weight: 500;
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}
.el-avatar {
  margin-top: 10px;
  cursor: pointer;
}
</style>
